<template>
    <div>
        <el-container>
            <!-- 左边，三级下拉 -->
            <el-aside width="500px">
                <el-row class="line-space1">
                    <el-col>
                        <span class="grid-content bg-purple-dark">部门管理</span>&nbsp;
                    </el-col>
                </el-row>
                <div class="line-space">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu class="el-menu-vertical-demo">
                                <el-menu-item v-for="(v,i) in bmData" @click="handle(v)">
                                    <template slot-scope="scope">
                                        <span slot="title">{{v}}</span>
                                    </template>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
            </el-aside>
            <!-- 右边，内容搜索 -->
            <el-main>
                <el-row class="line-space2">
                    <el-col :span="16" :offset="1">
                        <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="部门名称" prop="departmentName">
                                <el-input placeholder="显示部门名称" :value="show.personnel_bm" disabled></el-input>
                                <span></span>
                            </el-form-item>
                            <el-form-item label="负责人" prop="principal">
                                <el-input placeholder="例如：张三" :value="show.personnel_ygmc" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" prop="principal">
                                <el-input placeholder="例如：张三" :value="show.personnel_sjhm" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱地址" prop="principal">
                                <el-input placeholder="例如：张三" :value="show.personnel_yxdz" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16" :offset="3">
                        <div id="c_main"></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import * as echarts from 'echarts/core';
    import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
    } from 'echarts/components';
    import { PieChart } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';
    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer
    ]);
    export default {
        data() {
            return {
                selectData: [],
                bmData: [],
                newData: [],
                numData: [],
                ddd: [0],
                inputData: {},
                rules: {
                    departmentName: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { min: 0, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    principal: [
                        { required: false, message: '请选择负责人', trigger: 'blur' },
                    ],
                    desc: [
                        { required: false }
                    ]
                },
                show: {
                    personnel_bm: '',
                    personnel_ygmc: '',
                    personnel_sjhm: '',
                    personnel_yxdz: ''
                }
            }
        },
        methods: {
            get() {
                this.$axios({
                    url: '/record/personSel',
                }).then((res) => {
                    this.selectData = res.data.data

                    for (let i = 0; i < res.data.data.length; i++) {
                        this.bmData.push(res.data.data[i].personnel_bm)
                    }
                    this.newData = [...this.bmData]

                    this.bmData = [...new Set(this.bmData)]

                    this.numData.push(this.newData.filter(i => { return i == '招商开发部' }).length)
                    this.numData.push(this.newData.filter(i => { return i == '停车管理部' }).length)
                    this.numData.push(this.newData.filter(i => { return i == '客户服务部' }).length)
                    this.numData.push(this.newData.filter(i => { return i == '安全保卫部' }).length)
                    this.numData.push(this.newData.filter(i => { return i == '设备管理部' }).length)
                    this.numData.push(this.newData.filter(i => { return i == '保洁绿化部' }).length)
                    this.getimg()
                })
            },
            handle(key) {
                let arr = [...this.selectData.filter(v => {
                    return key == v.personnel_bm
                })]
                this.show.personnel_bm = arr[0].personnel_bm;
                this.show.personnel_ygmc = arr[0].personnel_ygmc;
                this.show.personnel_sjhm = arr[0].personnel_sjhm;
                this.show.personnel_yxdz = arr[0].personnel_yxdz;
            },
            bmSelect(data) {
                this.inputData = { ...data }
            },
            getimg() {
                echarts.use([LegendComponent])
                var main = echarts.init(document.querySelector('#c_main'));
                var option;
                // let datas = []
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                // { value: datas[0], name: '招商开发部' },
                                { value: this.numData[0], name: '招商开发部' },
                                { value: this.numData[1], name: '停车管理部' },
                                { value: this.numData[2], name: '客户服务部' },
                                { value: this.numData[3], name: '安全保卫部' },
                                { value: this.numData[4], name: '设备管理部' },
                                { value: this.numData[5], name: '保洁绿化部' }
                            ]
                        }
                    ],
                };
                main.setOption(option)
            }
        },
        beforeUpdate() {

        },
        created() {
            this.get()

        }
    }

</script>

<style scoped lang="less">
    .grid-content,
    .el-icon-circle-plus-outline {
        font-size: 20px;
    }

    .line-space {
        margin: 20px 50px;
    }

    .line-space1 {
        margin: 20px 50px 20px 50px;
    }

    .line-space2 {
        margin: 45px;
    }

    .el-menu-item {
        color: black;
    }

    #c_main {
        width: 600px;
        height: 400px;
    }
</style>